<template>
  <div class="main-box">
    <div class="fiter-box">
      <TreeFilter id="value" title="企业帐号" :request-api="getCompanyUsersTreeApi" @change="changeTreeFilter" />
    </div>
    <div class="table-box">
      <ProTable ref="proTable" title="用户列表" :request-api="getCompanyUserTongjiApi" :columns="columns" :init-param="initParam">
        <template #flagIdentity="scope">
          <el-tag :type="scope.row.flagIdentity === 'Y' ? '' : 'danger'">
            {{ scope.row.flagIdentity === "Y" ? "已认证" : "未认证" }}
          </el-tag>
        </template>
        <template #operation="scope">
          <el-button type="primary" link @click="handleOpenCompnayUserCoinDetailDialog(1, scope.row)"> 充值流水 </el-button>
          <el-button type="primary" link @click="handleOpenCompnayUserCoinDetailDialog(2, scope.row)"> 当家币配置 </el-button>
          <el-button type="primary" link @click="handleOpenCompnayUserCoinDetailDialog(3, scope.row)"> 交易流水 </el-button>
        </template>
      </ProTable>
    </div>
    <CompanyUserCoinDetailDialog ref="cpyusrcoinDetailDialogRef" />
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getCompanyUsersTreeApi, getCompanyUserTongjiApi } from "@/api/modules/cpy/act";
import { filterDateType } from "@/biz/datas/appData";
import CompanyUserCoinDetailDialog from "./components/CompanyUserCoinDetailDialog.vue";
import { reactive, ref } from "vue";

const proTable = ref();
const initParam = reactive({ userId: "0" });

// 树形筛选切换
const changeTreeFilter = (val: string) => {
  // ElMessage.success("请注意查看请求参数变化 🤔" + val);
  initParam.userId = val;
};

// 表格列配置
const columns: Partial<ColumnProps>[] = [
  // { type: "selection", width: 80, fixed: "left" },
  { type: "index", label: "#", width: 40 },
  { prop: "account", label: "帐号" },
  {
    prop: "userName",
    label: "姓名",
    width: 70
  },
  {
    prop: "phone",
    label: "手机号",
    width: 110
  },
  {
    prop: "jobOnlineCnt",
    label: "招聘中",
    width: 80
  },
  {
    prop: "jobApplyCnt",
    label: "审核中",
    width: 80
  },
  {
    prop: "jobRefuseCnt",
    label: "已拒绝",
    width: 80
  },
  {
    prop: "jobWorkerViewCnt",
    label: "浏览量",
    width: 80
  },
  {
    prop: "jobWorkerApplyCnt",
    label: "申请量",
    width: 80
  },
  {
    prop: "downloadWorkerCnt",
    label: "下载工友数"
  },
  {
    prop: "sendInterviewCnt",
    label: "发送面试数"
  },
  {
    prop: "showUsedCnt",
    label: "用当家币"
  },
  {
    prop: "showAvailableCnt",
    label: "剩余当家币"
  },
  { prop: "flagIdentity", label: "实名", width: 80 },
  {
    prop: "filterType",
    label: "筛选日期",
    isShow: false,
    enum: filterDateType,
    search: { el: "select" }
  },
  {
    prop: "operation",
    label: "操作",
    width: 260,
    fixed: "right"
  }
];

// 打开 企业子帐号的流水
const cpyusrcoinDetailDialogRef = ref();
const handleOpenCompnayUserCoinDetailDialog = (type: number, rowData?: { id: string }) => {
  // console.log(proTable.value.searchParam);
  let filterType = proTable.value.searchParam?.filterType || 0;
  let params = {
    type,
    filterType,
    rowData
  };
  cpyusrcoinDetailDialogRef.value.acceptParams(params);
};
</script>

<style scoped lang="scss">
.fiter-box {
  display: flex;
}
</style>
